<template>
  <div class="app-container">
    <el-container style="border-bottom: 1px solid #E1E2E6" v-for="(typeList,key) in typeLists">
      <el-aside width="210px" style="padding: 30px 0;">
        <span v-if="key==1">支出类型:</span>
        <span class="aside-btn">全部</span>
      </el-aside>
      <el-container>
        <el-main>
          <transition-group tag="div" class="container">
            <div class="item" v-for="item in typeList" :key="item.typeId"
                 draggable="true"
                 @dragstart="handleDragStart($event, item)"
                 @dragover.prevent="handleDragOver($event, item)"
                 @dragenter="handleDragEnter($event, item)"
                 @dragend="handleDragEnd($event, item)">
              <ul class="main-btn">
                <li class="main-btn-title">{{item.typeName}}</li>
                <li class="icon-edit" @click="update(item.typeId)"><i class="el-icon-edit"></i></li>
                <li class="icon-close">
                  <el-popover
                    placement="top"
                    width="160"
                    :ref="`popover-${item.typeId}`"
                  >
                    <p>确定删除这条数据吗?</p>
                    <div style="text-align: right; margin: 0">
                      <el-button size="mini" type="text" @click="$refs[`popover-${item.typeId}`][0].doClose()">取消
                      </el-button>
                      <el-button type="primary" size="mini" @click.native.prevent="deleteInfotype(item.typeId)">确定
                      </el-button>
                    </div>
                    <i class="el-icon-close" slot="reference" v-popover:popover-${item.typeId}></i>
                  </el-popover>
                </li>
              </ul>
            </div>
          </transition-group>
          <div class="container">
            <div class="plus" @click="insert()">
              <i class="el-icon-plus"></i>
            </div>
            <div class="plus" @click="sortCostType()">
              <span>保存</span>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog :title="dialogTitle" :visible.sync="outerVisible" width="440px">
      <el-form ref="infotype" :rules="rules" :model="infotype" label-width="120px">
        <el-form-item prop="typeName" label="支出类型名称" size="small">
          <el-input v-model="infotype.typeName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="warning" size="small" @click="submitForm('infotype')" v-no-more-click>确定</el-button>
        <el-button size="small" @click="outerVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script>
  import {
    addCostType,
    deleteCostType,
    getCostTypelist,
    selectCostType,
    updateCostType,
    sortCostType
  } from '@/api/costtype'

  export default {
    data() {
      return {
        outerVisible: false,
        typeLists: {
          1: {}
        },
        dialogTitle: '新增支出类型',
        infotype: {
          typeName: ''
        },
        infotypeClear: {},
        rules: {
          typeName: [
            { required: true, message: '请输入类型名称', trigger: 'change' }
          ]
        },
        dragging: null
      }
    },
    created() {
      this.infotypeClear = JSON.parse(JSON.stringify(this.infotype))
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.listLoading = true
        getCostTypelist().then(response => {
          this.typeLists['1'] = response.responseBody
          console.log(this.typeLists)
          this.listLoading = false
        })
      },
      insert() {
        if (this.$refs['infotype']) {
          this.$refs['infotype'].resetFields()
        }
        this.outerVisible = true
        this.dialogTitle = '新增支出类型'
        this.infotype = JSON.parse(JSON.stringify(this.infotypeClear))
        this.dialogType = 1
      },
      update(typeId) {
        if (this.$refs['infotype']) {
          this.$refs['infotype'].resetFields()
        }
        this.outerVisible = true
        this.dialogTitle = '修改支出类型'
        this.infotype = JSON.parse(JSON.stringify(this.infotypeClear))
        this.dialogType = 0
        const params = {
          typeId: typeId
        }
        selectCostType(params).then(response => {
          this.infotype = response.responseBody
        })
      },
      submitForm(formName) {
        const params = JSON.parse(JSON.stringify(this.infotype))
        console.log(this.$refs[formName])
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.dialogType) {
              addCostType(params).then(response => {
                this.outerVisible = false
                this.fetchData()
              })
            } else {
              updateCostType(params).then(response => {
                this.outerVisible = false
                this.fetchData()
              })
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      deleteInfotype(typeId) {
        console.log(this.$refs[`popover-${typeId}`])
        this.$refs[`popover-${typeId}`][0].doClose()
        const params = {
          typeId: typeId,
          isDel: 1
        }
        deleteCostType(params).then(response => {
          this.fetchData()
        })
      },
      sortCostType() {
        sortCostType(this.typeLists['1']).then(response => {
          this.fetchData()
        })
      },
      handleDragStart(e, item) {
        this.dragging = item
      },
      handleDragEnd(e, item) {
        this.dragging = null
      },
      // 首先把div变成可以放置的元素，即重写dragenter/dragover
      handleDragOver(e) {
        e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
      },
      handleDragEnter(e, item) {
        e.dataTransfer.effectAllowed = 'move' // 为需要移动的元素设置dragstart事件
        if (item === this.dragging) {
          return
        }
        const newItems = [...this.typeLists['1']]
        console.log(newItems)
        const src = newItems.indexOf(this.dragging)
        const dst = newItems.indexOf(item)

        newItems.splice(dst, 0, ...newItems.splice(src, 1))
        this.typeLists['1'] = newItems
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $bg: #73B144;
  $grey: #717679;

  .el-aside {
    span {
      display: inline-block;
      padding: 10px;
      line-height: 25px;
      color: #555F6B;
    }
    .aside-btn {
      width: 65px;
      text-align: center;
      color: #fff;
      background: $bg;
      border-radius: 4px;
    }
  }

  .el-main {
    padding: 30px;
    .main-btn {
      display: flex;
      flex-direction: row;
      width: 220px;
      height: 45px;
      padding: 15px;
      margin-right: 15px;
      margin-bottom: 30px;
      color: #fff;
      background: $grey;
      border-radius: 4px;
      &:hover {
        background: $bg;
      }
      li {
        display: flex;
        align-items: center;
      }
      .main-btn-title {
        width: 150px;
      }
      .icon-edit {
        flex-grow: 1;
        justify-content: right;
        cursor: pointer;
      }
      .icon-close {
        justify-content: right;
        cursor: pointer;
      }
    }
    .plus {
      width: 70px;
      height: 45px;
      text-align: center;
      font-size: 30px;
      line-height: 45px;
      color: #fff;
      background: $bg;
      border-radius: 4px;
      cursor: pointer;
      &:last-child {
        margin-left: 20px;
      }
      span {
        display: block;
        font-size: 20px;
      }
    }
    .item {
      transition: all 0.3s linear;
      -moz-transition: all 0.3s linear; /* Firefox 4 */
      -webkit-transition: all 0.3s linear; /* Safari 和 Chrome */
      -o-transition: all 0.3s linear;
    }
    .container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
  }

</style>


<style rel="stylesheet/scss" lang="scss">

</style>
